<template>
  <div style="text-align: center;font-size: xx-large">个人信息</div>
  <div style="margin: 20px">
    <el-row :gutter="30">
      <el-col :span="6" :xs="24">
        <!--          <div class="clearfix">
                    <span>个人信息</span>
                  </div>-->
        <el-card class="box-card">
          <div>
            <ul style="text-align: left">
              <li style="height: 30px">
                <svg-icon icon-class="number"  />工号
                <div class="pull-right">{{ state.user.number }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="phone" />姓名
                <div class="pull-right">{{ state.user.name }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="email" />性别
                <div class="pull-right">{{ state.user.sex }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="tree" />身份证号
                <div class="pull-right">{{ state.user.identity }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="peoples" />出生年月
                <div class="pull-right">{{ state.user.birth }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="date" />等级
                <div class="pull-right">{{ state.user.grade}}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div>
            <ul style="text-align: left">
              <li style="height: 30px">
                <svg-icon icon-class="number" />人员分类
                <div class="pull-right">{{ state.user.employee }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="phone" />正式编制
                <div class="pull-right">{{ state.user.compile }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="email" />角色
                <div class="pull-right">{{ state.user.role }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="tree" />职称
                <div class="pull-right">{{ state.user.jobtitle }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="peoples" />部门名称
                <div class="pull-right">{{ state.user.department }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="date" />主职务
                <div class="pull-right">{{ state.user.duties }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div>
            <ul style="text-align: left">
              <li style="height: 30px">
                <svg-icon icon-class="date" />头衔
                <div class="pull-right">{{ state.user.title }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="email" />民族
                <div class="pull-right">{{ state.user.nation }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="tree" />入党日期
                <div class="pull-right">{{ state.user.partyTime }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="peoples" />入职日期
                <div class="pull-right">{{ state.user.entryDate }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="date" />政治面貌
                <div class="pull-right">{{ state.user.politicalOutlook }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="date" />教育类型
                <div class="pull-right">{{ state.user.educationType }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div>
            <ul style="text-align: left">
              <li style="height: 30px">
                <svg-icon icon-class="date" />婚姻
                <div class="pull-right">{{ state.user.marriage }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="phone" />手机号
                <div class="pull-right">{{ state.user.phonenumber }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="phone" />籍贯
                <div class="pull-right">{{ state.user.birthplace }}</div>
              </li>
              <li style="height: 30px">
                <svg-icon icon-class="date" />文化程度
                <div class="pull-right">{{ state.user.education }}</div>
              </li>
            </ul>
            <el-button link type="primary" icon="Edit" @click="handleUpdate(state.user.id)">修改</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <!-- 添加或修改基本信息对话框 -->
  <el-dialog :title="title" v-model="open" width="500px" append-to-body>
    <el-form ref="informationRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="身份证号" prop="identity">
        <el-input v-model="form.identity" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <div class="mb-2 ml-4">
          <el-radio-group v-model="form.sex">
            <el-radio value="男" size="large">男</el-radio>
            <el-radio value="女" size="large">女</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="出生年月" prop="birth">
        <el-date-picker clearable
                        v-model="form.birth"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择出生年月">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-input v-model="form.role" placeholder="请输入角色" />
      </el-form-item>
      <el-form-item label="职称" prop="jobtitle">
        <el-select
            v-model="form.jobtitle"
            placeholder="职称"
            clearable >
          <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文化程度" prop="education">
        <el-select
            v-model="form.education"
            placeholder="文化程度"
            clearable >
          <el-option
              v-for="item in edutype"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="头衔" prop="title">
        <el-input v-model="form.title" placeholder="请输入头衔" />
      </el-form-item>
      <el-form-item label="籍贯" prop="birthplace">
        <el-input v-model="form.birthplace" placeholder="请输入籍贯" />
      </el-form-item>
      <el-form-item label="民族" prop="nation">
        <el-input v-model="form.nation" placeholder="请输入民族" />
      </el-form-item>
      <el-form-item label="入党日期" prop="partyTime">
        <el-date-picker clearable
                        v-model="form.partyTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择入党日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="入职日期" prop="entryDate">
        <el-date-picker clearable
                        v-model="form.entryDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择入职日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="政治面貌" prop="politicalOutlook">
        <el-input v-model="form.politicalOutlook" placeholder="请输入政治面貌" />
      </el-form-item>
      <el-form-item label="教育类型" prop="education">
        <el-select
            v-model="form.educationType"
            placeholder="教育类型"
            clearable >
          <el-option
              v-for="item in eduType"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="婚姻状况" prop="marriage">
        <el-select
            v-model="form.marriage"
            placeholder="婚姻状况"
            clearable >
          <el-option
              v-for="item in marriageType"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="phonenumber">
        <el-input v-model="form.phonenumber" placeholder="请输入手机号" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import request from '@/utils/mine'
import {ref,reactive,onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {ArrowRight,Edit,Delete,Plus} from "@element-plus/icons-vue";
const open = ref(false);
const userInfo = reactive({
  'username' :null
})
const form=ref({
  id: null,
  number: null,
  name: null,
  identity: null,
  sex: null,
  birth: null,
  grade: null,
  employee: null,
  compile: null,
  role: null,
  jobtitle: null,
  department: null,
  education: null,
  duties: null,
  title: null,
  birthplace: null,
  nation: null,
  partyTime: null,
  entryDate: null,
  politicalOutlook: null,
  educationType: null,
  marriage: null,
  phonenumber: null
})
const type = [
  {label : '局长' , value : 1}
  ,{label : '科长' , value : 2}
  ,{label : '科员' , value : 3}
]
const edutype = [
  {label : '研究生' , value : 1}
  ,{label : '大学本科' , value : 2}
  ,{label : '大学专科' , value : 3}
  ,{label : '中等专业学校' , value : 4}
  ,{label : '中等技术学校' , value : 5}
  ,{label : '高中' , value : 6}
  ,{label : '初中' , value : 7}
  ,{label : '小学' , value : 8}
  ,{label : '文盲' , value : 9}
  ,{label : '半文盲' , value : 10}
]
const marriageType=[
  {label : '已婚' , value : 1}
  ,{label : '未婚' , value : 2}
  ,{label : '丧偶' , value : 3}
  ,{label : '离婚' , value : 4}
  ,{label : '再婚' , value : 5}
  ,{label : '其他' , value : 6}
]

const eduType=[
  {label : '全日制' , value : 1}
  ,{label : '其他' , value : 2}
]
const state = reactive({
  user: {
    id: null,
    number: null,
    name: null,
    identity: null,
    sex: null,
    birth: null,
    grade: null,
    employee: null,
    compile: null,
    role: null,
    jobtitle: null,
    department: null,
    education: null,
    duties: null,
    title: null,
    birthplace: null,
    nation: null,
    partyTime: null,
    entryDate: null,
    politicalOutlook: null,
    educationType: null,
    marriage: null,
    phonenumber: null
  },
});
onMounted( () => {
  // 从SessionStorage取出数据
  let userstr = sessionStorage.getItem('loginUser')

  userInfo.username = JSON.parse(userstr).username

  getList()
});
/** 查询基本信息列表 */
function getList() {
  request({
    url: '/information/listBynum',
    method: 'get',
    params: {number:userInfo.username}
  }).then(response => {
    state.user = response.data;
  });
}
/** 修改按钮操作 */
function handleUpdate(id) {
  open.value=true
    request({
      url:'/information/selectById',
      method:'get',
      params:{
        id:id
      }
    }).then((req)=>{
      console.log(req.data+"____________")
      form.value=req.data
    })
}
// 取消按钮
function cancel() {
  open.value = false;
}
/** 提交按钮 */
function submitForm() {
  request({
    url:'/information/update',
    method:'PUT',
    params:form.value
  }).then((req)=>{
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: '修改成功',
      });
      open.value=false
      getList()
    } else {
      ElMessage({
        type: 'info',
        message: '修改失败',
      });
    }
  })
}
</script>

<style scoped>
.pull-right {
  float: right !important;
}
.box-card{
  width: 305px;
  height: 270px;
}
</style>